import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import lazyLoad from './directives/lazyLoad.js'
import LazyImage from './components/LazyImage.vue'
import { performanceOptimizer, optimizeForVisibility, optimizeForNetwork } from './utils/performanceOptimizer.js'
import { initializeAdvancedOptimization, advancedOptimizer } from './utils/advancedOptimizer.js'

const app = createApp(App)

app.use(createPinia())
app.use(router)

// 注册懒加载指令
app.directive('lazy', lazyLoad)

// 注册懒加载组件
app.component('LazyImage', LazyImage)

// 性能优化初始化
if (typeof window !== 'undefined') {
  // 页面可见性优化
  optimizeForVisibility();

  // 网络状态优化
  const networkType = optimizeForNetwork();

  // 根据网络状态调整懒加载策略
  if (networkType === 'slow') {
    // 慢速网络：减少预加载距离
    window.LAZY_LOAD_MARGIN = '50px 0px';
  } else if (networkType === 'fast') {
    // 快速网络：增加预加载距离
    window.LAZY_LOAD_MARGIN = '200px 0px';
  } else {
    // 默认设置
    window.LAZY_LOAD_MARGIN = '150px 0px';
  }

  // 启动性能监控
  performanceOptimizer.startPerformanceMonitoring();

  // 预加载关键图片
  setTimeout(() => {
    performanceOptimizer.preloadCriticalImages();
  }, 1000);

  // 启动高级优化
  initializeAdvancedOptimization();

  // 性能报告
  setInterval(() => {
    const report = advancedOptimizer.getPerformanceReport();
    console.log('性能报告:', report);
  }, 30000); // 每30秒输出一次性能报告
}

app.mount('#app')
